<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>统计分析</el-breadcrumb-item>
      <el-breadcrumb-item>用户数据统计</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
       

      <el-row :gutter="20">
            <el-col :span="4">
                <el-label>总下载用户数：{{alluser}}人</el-label>
            </el-col>
      
<el-col :span="1">
            <el-label>&nbsp</el-label>   
        </el-col>
        <el-col :span="4">
                <el-label>活跃用户男：{{male}}人</el-label>
            </el-col>

<el-col :span="1">
            <el-label>&nbsp</el-label>   
        </el-col>
        <el-col :span="4">
                <el-label>活跃用户女：{{female}}人</el-label>
            </el-col>

      </el-row> 


      <el-row :gutter="20">
        <el-col :span="4">
                <el-label>用户最大年龄：{{maxage}}岁</el-label>
            </el-col>

        <el-col :span="1">
            <el-label>&nbsp</el-label>   
        </el-col>
            <el-col :span="4">
                <el-label>用户最小年龄：{{minage}}岁</el-label>
            </el-col>

<el-col :span="1">
            <el-label>&nbsp</el-label>   
        </el-col>
        <el-col :span="4">
                <el-label>用户平均年龄：{{aveage}}岁</el-label>
            </el-col>

      </el-row>

 <div class="Echarts" style="width:'100%',height:'6.54rem'">
        <charts :options="dayOptions" style="width:'100%',height:'100%'"></charts>
      </div>  

       <div class="Echarts" style="width:'100%',height:'6.54rem'">
        <charts :options="monthOptions" style="width:'100%',height:'100%'"></charts>
      </div> 

       <div class="Echarts" style="width:'100%',height:'6.54rem'">
        <charts :options="yearOptions" style="width:'100%',height:'100%'"></charts>
      </div>    


 <el-table :data="cityList" border stripe>
        <el-table-column label="城市" prop="city"></el-table-column>
        <el-table-column label="人数" prop="count"></el-table-column>
     
      </el-table>
    
  


      <el-row :gutter="20">
            <el-col :span="4">
                <el-label>总里程：{{sysdata.summileage}}公里</el-label>
            </el-col>
      
<el-col :span="1">
            <el-label>&nbsp</el-label>   
        </el-col>
        <el-col :span="4">
                <el-label>平均里程：{{sysdata.averagemileage}}公里</el-label>
            </el-col>

<el-col :span="1">
            <el-label>&nbsp</el-label>   
        </el-col>
        <el-col :span="4">
                <el-label>最高速度：{{sysdata.maxspeed}}km/h</el-label>
            </el-col>

        <el-col :span="1">
            <el-label>&nbsp</el-label>   
        </el-col>
        <el-col :span="4">
                <el-label>平均速度：{{sysdata.averagespeed}}km/h</el-label>
            </el-col>

      </el-row> 


      <el-row :gutter="20">
        <el-col :span="4">
                <el-label>最高加速度：{{sysdata.maxacc}}m/s2</el-label>
            </el-col>

        <el-col :span="1">
            <el-label>&nbsp</el-label>   
        </el-col>
            <el-col :span="4">
                <el-label>平均加速度：{{sysdata.averageacc}}m/s2</el-label>
            </el-col>

<el-col :span="1">
            <el-label>&nbsp</el-label>   
        </el-col>
        <el-col :span="4">
                <el-label>最高减速度：{{sysdata.nmaxacc}}m/s2</el-label>
            </el-col>

        <el-col :span="1">
            <el-label>&nbsp</el-label>   
        </el-col>
        <el-col :span="4">
                <el-label>平均减速度：{{sysdata.naverageacc}}m/s2</el-label>
            </el-col>

      </el-row> 



    </el-card>
          <el-row :gutter="20">
            <el-col :span="4">
                <el-label>用户分布热力图</el-label>
            </el-col>
            </el-row>
            <div  id="container" :style="{width:'90%',height:'500px',margin: '0 auto'}" class="amap-page-container">
        
      </div>

  </div>
</template>
<script src="https://webapi.amap.com/maps?v=1.4.14&key=6fb0d312349708aabc14ad967930ce9e&plugin=AMap.CustomLayer,AMap.ControlBar,AMap.Heatmap,AMap.MapType,AMap.OverView,AMap.Scale,AMap.ToolBar"></script>
<script>
import ECharts from 'vue-echarts/components/ECharts'
//import VueAMap, {lazyAMapApiLoaderInstance} from 'vue-amap'
import AMap from 'AMap'
export default {

  data () {
    return {

      dayOptions: {},
      monthOptions: {},
      yearOptions: {},

      cityList: [],
      heatList:[],

      alluser:0,
      male:0,
      female:0,

      maxage:0,
      minage:0,
      aveage:0,

      locationList:[],

      dayline:[],
      monthline:[],
      yearline:[],
      sysdata:{},

      dayx:[],
      dayy:[],
      monthx:[],
      monthy:[],
      yearx:[],
      yeary:[],


      amap: {},
      heatmap: {},
      heatmapShow: false,

      zoom:3,
      center: [120.199538,30.261412],
      lng: 0,
      lat: 0,

    }

  },
  created () {
    // 加载页面时 加载一次数据
    
    this.getAllUser()
    this.getActiveUser()
    this.getUserAge()
    this.getCityList()
    this.getdayline()
    this.getmonthline()
    this.getyearline()
    this.getsysdata()
    this.getHeatData()
   // lazyAMapApiLoaderInstance.load().then(() => { console.log('AMap load success.') })


  },
  mounted () {
    /*ECharts图表*/
    this.dayOptions = {
      title: { text: '日访问数据曲线' },
      xAxis: {
       type: 'category',
       data: this.dayx
       },
       yAxis: {
           type: 'value'
       },
       series: [{
           name: '访问量',
           data: this.dayy,
           type: 'line'
      }]
     };

        this.monthOptions = {
      title: { text: '月访问数据曲线' },
      xAxis: {
       type: 'category',
       data: this.monthx
       },
       yAxis: {
           type: 'value'
       },
       series: [{
           name: '访问量',
           data: this.monthy,
           type: 'line'
      }]
     };

    this.yearOptions = {
      title: { text: '年访问数据曲线' },
      xAxis: {
       type: 'category',
       data: this.yearx
       },
       yAxis: {
           type: 'value'
       },
       series: [{
           name: '访问量',
           data: this.yeary,
           type: 'line'
      }]
     };

    this.amap = new AMap.Map("container", {
        resizeEnable: true,
        center: [120.199538,30.261412],
        zoom: 3
    });
    let that=this
    var heatmap;
    this.amap.plugin(["AMap.Heatmap"], function () {
        //初始化heatmap对象
        heatmap = new AMap.Heatmap(that.amap, {
            radius: 40, //给定半径
            opacity: [0, 0.8],
            
            gradient:{
                0.5: 'blue',
                0.65: 'rgb(117,211,248)',
                0.7: 'rgb(0, 255, 0)',
                0.9: '#ffea00',
                1.0: 'red'
            }
             
        });
        //设置数据集：该数据为北京部分“公园”数据
        heatmap.setDataSet({
            data: that.heatList,
            max: 100
        });
    });
    this.heatmap = heatmap

  },
  
  methods: {
  
  async getAllUser () {
      const { data: res } = await this.$http.get('/statistic/getusernumber')
      if (res.code !== 200) return this.$message.error('Error:' + res.message)
      this.alluser = res.data
    },

      async getActiveUser () {
      const { data: res } = await this.$http.get('/statistic/getactiveuser')
      if (res.code !== 200) return this.$message.error('Error:' + res.message)
      let str = res.data
      this.male = str.split(",")[0]
      this.female = str.split(",")[1]
       
    },
    numFilter(value) {
      const realVal = parseFloat(value).toFixed(2);
      return realVal;
    },

      async getUserAge () {
      const { data: res } = await this.$http.get('/statistic/getuserage')
      if (res.code !== 200) return this.$message.error('Error:' + res.message)
      this.maxage= res.data.split(",")[0]
      this.minage = res.data.split(",")[1]
      this.aveage = res.data.split(",")[2]
      this.aveage = this.numFilter(this.aveage)
  // console.log(res.data)    
    },

      async getCityList () {
      const { data: res } = await this.$http.get('/statistic/getcitydata')
      if (res.code !== 200) return this.$message.error('Error:' + res.message)
      this.cityList = res.data
      
    },

     async getdayline(){
      const { data: res } = await this.$http.get('/statistic/getdayguest')
      if (res.code !== 200) return this.$message.error('Error:' + res.message)
      this.dayline = res.data

      this.dayline.forEach(element => {
        this.dayx.push(element.createTime)
        this.dayy.push(element.number)
      });

      //console.log(res.data)
     },

     async getmonthline(){
      const { data: res } = await this.$http.get('/statistic/getmonthguest')
      if (res.code !== 200) return this.$message.error('Error:' + res.message)
      this.monthline = res.data
      this.monthline.forEach(element => {
        this.monthx.push(element.month)
        this.monthy.push(element.number)
      })
      //console.log(res.data)
     },

     async getyearline(){
      const { data: res } = await this.$http.get('/statistic/getyearguest')
      if (res.code !== 200) return this.$message.error('Error:' + res.message)
      this.yearline = res.data
      this.yearline.forEach(element => {
        this.yearx.push(element.year)
        this.yeary.push(element.number)
      })
      //console.log(res.data)
     },

      async getsysdata(){
      const { data: res } = await this.$http.get('/statistic/getsysdata')
      if (res.code !== 200) return this.$message.error('Error:' + res.message)
      this.sysdata = res.data
      this.sysdata.averagemileage = this.numFilter(this.sysdata.averagemileage)
      this.sysdata.averagespeed = this.numFilter(this.sysdata.averagespeed)
      this.sysdata.averageacc = this.numFilter(this.sysdata.averageacc)
      this.sysdata.naverageacc = this.numFilter(this.sysdata.naverageacc)

     },

     async getHeatData(){
       const { data: res } = await this.$http.get('/statistic/gethotdata')
      if (res.code !== 200) return this.$message.error('Error:' + res.message)
      this.heatList = res.data
      this.heatmap.setDataSet({
            data: this.heatList,
            max: 2
        });
      console.log(this.heatList)

     }




  },
  filters: {

  }
}
</script>

<style lang="less" scope>
.el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0px;
      align:'center'
    }
  }

.el-label{
  align:'center'
}
</style>
